<template>
    <div>
        <div v-for="(item,index,) in videoList" :key="index">
            <div class="m d" @dblclick="fullScreen" v-if="showVideo">
                <video id="video-player"  class="video-js vjs-big-play-centered vjs-fluid vjs-default-skin" autoplay  controls preload="none" data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'> 
                </video>
            </div>
            <div class="videoCover" @click="playMv(item)">
                <div class="videoer">
                    {{item.artistName}}
                </div>
                <img :src="item.cover" alt="">
                <div class="playTotal">
                    <span><i class="iconfont icon-video"></i>{{item.playCount}}</span>
                    <span><i class="iconfont icon-renwujindu"></i>{{item.duration}}</span>
                </div>
                <div class="cover">
                    <i class="iconfont icon-bofang"></i>
                </div>
            </div>
            <div class="desc">
                {{item.briefDesc}}
            </div>
        </div>
    </div>
    
</template>
<script>
import videojs from 'video.js' ;
import 'video.js/dist/video-js.min.css' ;
import './../../css/music.scss' ;
import store from './../../store/index' ;
import { mapState } from 'vuex' ;
export default {
  data(){
        return {
            data:"视频",
            showVideo:false 
        }
  },
  created(){
      
  },
  computed:mapState({
      videoList:state => state.common.videoList , 
      playAddress : state => state.common.playAddress
  }),
  mounted(){
    this.$store.dispatch(('getVideoList')).then(() => {
            //    this.videoList1 =  this.$store.state.videoList
    });
  },
  beforeDestroy(){
    // this.player.dispose();
  },
  methods:{
        initPlay:function(address){
            let options = {
                width:'100%',
                techOrder: ["html5"],
                BigPlayButton:false ,
                controlBar: {
                    captionsButton: false,
                    chaptersButton: false,
                    playbackRateMenuButton: true,
                    LiveDisplay: true,
                    subtitlesButton: false,
                    remainingTimeDisplay: true,
                    progressControl: true,
                    volumeMenuButton: {
                    inline: false,
                    vertical: true
                    },//竖着的音量条
                    fullscreenToggle: true
                },
                fluid: true,  //高度自适应
                "loop": false, //是否循环播放 ,
                duration:true ,

            }
            var _this = this ;
            _this.player = videojs('video-player',options,function (params) {
                // console.log(this.currentTime())
                
                document.getElementsByClassName('m')[0].addEventListener('touchstart',function (params) {
                    console.log('sadww') ;
                })
             })
             
         console.log(address)
            this.player.src(address)  ;
        },
        //销毁视频
        dispose:function(){
          this.player.dispose();
        },
        fullScreen:function(){
            if (this.player.isFullscreen_) {
                this.player.exitFullscreen();
            } else {
                this.player.requestFullscreen();
            };
        },
        playMv:function(item){
            this.showVideo = true ;
            this.$store.dispatch(('playMv'),item.id).then(() => {
                if(!this.player){
                    this.initPlay(this.playAddress) ;
                }
                else{
                    this.player.src(this.playAddress)  ;
                }
            });
        }
  }
}
</script>